﻿@page
@model Opac2023.Pages.Polygon

<div class="row">
    <h3>Список баз данных</h3>
    <select id="database-list"></select>
</div>

<div class="row mt-3">
    <h3>Сценарии</h3>
    <select id="scenario-list"></select>
</div>

<div class="row mt-3">
    <h3>Поиск</h3>
    <div class="input-group">
        <input id="search-for" type="text" class="form-control"/>
        <button class="btn btn-primary" onclick="performSearch()">Искать</button>
    </div>
    <ul class="mt-3" id="found-list"></ul>
</div>

<div class="row mt-3">
    <h3>Отладка</h3>
    <div id="test-output"></div>
</div>

<script type="text/javascript">
    const documentURL = new URL (document.URL)
    const apiURL = documentURL.protocol + '//' + documentURL.host + '/api/'
    const databaseList = document.getElementById ('database-list')
    const scenarioList = document.getElementById ('scenario-list')
    const searchFor = document.getElementById ('search-for')
    const foundList = document.getElementById ('found-list')
    const testOutput = document.getElementById ('test-output')
    var currendDatabase = ''

    function clearOptionList (list) {
        const length = list.options.length
        var i
        for (i = length - 1; i >= 0; i--) {
            scenarioList.options.remove(i)
        }
    }

    function clearList (list) {
        while (list.firstChild) {
            list.removeChild (list.firstChild);
        }
    }

    function performSearch() {
        clearList (foundList)

        const searchValue = searchFor.value
        if (!searchValue) {
            return
        }

        const expression = scenarioList.value + searchValue + '$'
        axios.get (apiURL + 'brief/' + currentDatabase + '/' + expression)
            .then(function (response) {
                for (const found of response.data) {
                    const element = document.createElement ('li')
                    element.innerText = found.mfn + '. ' + found.text
                    foundList.appendChild (element)
                }
            })

        testOutput.innerText = searchFor.value
    }

    function databaseChanged() {
        currentDatabase = databaseList.value
        testOutput.innerText = currentDatabase

        clearOptionList (scenarioList)
        axios.get (apiURL + 'scenarios/' + currentDatabase)
            .then (function (response) {
                for (const scenario of response.data) {
                    const element = document.createElement('option')
                    element.textContent = scenario.prefix + scenario.name
                    element.value = scenario.prefix
                    scenarioList.appendChild (element)
                }
        })
    }

    setTimeout(function () {
        clearOptionList (databaseList)
        axios.get (apiURL + 'db')
        .then (function (response) {
            for (const db of response.data) {
                const element = document.createElement ('option')
                element.textContent = db.name + ' - ' + db.description
                element.value = db.name
                databaseList.appendChild (element)
            }
            databaseList.addEventListener ("change", databaseChanged)
            databaseChanged()
        })
    })

</script>
